<template>
  <div class='order'>
    <div class="top">
      <div class="logo"></div>
      <div class="txt">手机号码注册/登陆</div>
    </div>
    <form action="">
      <div class="phone">
        <input type="text" placeholder="请输入手机号" v-model='value'>
      </div>
      <div class="password">
        <input type="text" placeholder="请输入验证码">
        <input type="button" value='获取验证码' class="YZ">
      </div>
      <input type="button" value="一键注册/登录" class="confirm" :class='{active:value}'>
      <div class="bottom">
        <div class="pho">非大陆手机号登录</div>
        <div class="zhanghao">账号密码登录</div>
      </div>
    </form>
    <div class="bottom">
      <div class="other">
        <div class="weixin"></div>
        <div class="qq"></div>
      </div>
      <div class="tiaoyue">
        <div class="bg" @click="fun" :class="{check:flag}"></div>
        未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意
        <span>《服务协议》</span>和<span>《隐私协议》</span>
      </div>
      <div class="xiaochengxu">
        体验游侠客微信小程序>>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name: 'Order',
  data () {
    return {
      value: '',
      flag: false
    }
  },
  methods: {
    fun () {
      this.flag = !this.flag;
    }
  }
}
</script>
<style lang='less'>
.order{
  &>.top{
    &>.logo{
      width: 100px;
      height: 100px;
      margin: 20px auto 0;
      background-image: url(/static/Order/logo.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    &>.txt{
      font-size: 20px;
      font-weight: bold;
    }
  }
  &>form{
    &>.phone,&>.password{
      width: 90%;
      margin: 30px auto 10px;
      height: 50px;
      line-height:50px;
      background-color: #fbfbfb;
      text-align:left;
      &>input{
        height: 24px;
        font-size:18px;
        padding-left:30px;
        border:none;
        outline:none;
        background-color: #fbfbfb;
      }
      &>.YZ{
        color:#ecc927;
      }
    }
    &>.confirm{
      background-color: #fff6cc;
      width: 80%;
      outline:none;
      border:none;
      height: 50px;
      border-radius:10px;
      font-size:18px;
      color: rgba(3, 3, 3, .3);
    }
    &>.active{
      background-color: #ffdf35;
      color:#333;
    }
    &>.bottom{
      padding:20px 50px;
      display: flex;
      justify-content:space-between;
      color:#999;
    }
  }
  &>.bottom{
    margin-top:220px;
    .other{
      margin:auto;
      width: 40%;
      display: flex;
      justify-content:space-between;
      &>div{
        width: 40px;
        height: 40px;
        background-image: url(/static/Order/weichat.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      &>.qq{
        background-image: url(/static/Order/qq.png);
      }
    }
    &>.tiaoyue{
      color:#999;
      text-align:left;
      margin: 50px 30px;
      .bg{
        float:left;
        width: 14px;
        height: 14px;
        background-image: url(/static/Order/o.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      .check{
        background-image: url(/static/Order/duigou.png);
      }
      &>span{
        color:#333;
      }
    }
    &>.xiaochengxu{
      box-sizing:border-box;
      border-top:1px solid #eee;
      height: 50px;
      line-height:50px;
      width: 100%;
      position:absolute;
      bottom:0;
      color:#f0d351;
      font-size:18px;
    }
  }
}
</style>
